<template>
	<a-modal v-if="props.open" v-bind="cAttr">
		<template #title v-if="props.showTitle">
			<p class="font-16-bold">{{ props.title }}</p>
			<close-outlined v-if="props.closable" @click="closeModal" />
		</template>

		<div class="modal-content">
			<!-- 内容区采用匿名插槽 -->
			<slot></slot>
		</div>

		<template #footer>
			<slot name="Slot-Footer"></slot>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
interface IProps {
	open: boolean;
	showTitle?: boolean;
	title?: string;
	width?: number;
	closable: boolean;
	// 垂直居中展示 Modal
	centered?: boolean;
	// 额外的样式类名, 如果当前调用此组件的页面需要特定的样式, 可给组件添加props属性 = className, 并在当前页面增加此 className 的样式属性, 父组件的style需要去掉scoped
	className?: string;
}

const props = withDefaults(defineProps<IProps>(), {
	open: true,
	showTitle: true,
	title: '',
	closable: true,
	width: undefined,
	centered: true,
	className: '',
	footer: null
});

const emits = defineEmits<{
	(e: 'close'): void;
}>();

const cAttr = computed(() => {
	return {
		class: ['g-modal', props.className || ''],
		width: !!props.width ? props.width : 416,
		centered: props.centered,
		// 关闭时销毁 Modal 里的子元素
		destroyOnClose: true,
		open: true,
		closable: false
	};
});

// 关闭弹窗
const closeModal = () => emits('close');
</script>

<style lang="less">
.g-modal {
	.ant-modal-content {
		border-radius: 8px;
		padding: 0;
		box-shadow: @shadowL;
	}

	.ant-modal-header {
		height: 54px;
		margin: 0;
		border-bottom: 1px solid @background03;
		padding: 16px 24px;

		.ant-modal-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			svg {
				font-size: 16px;

				&:hover {
					opacity: 0.75;
					cursor: pointer;
				}
			}
		}
	}

	.ant-modal-body {
		padding: 0;
	}

	.ant-modal-footer {
		height: 82px;
		margin: 0;
		padding: 24px 32px;
	}

	.modal-content {
		padding: 40px 32px;
	}
}
</style>
